<template>
  <div>
    <nav-bar :title="'意见反馈'" />
    <main>
      <span class="intro">简介</span>
      <div class="textarea-wrapper">
        <van-field
          v-model="commentContent"
          rows="3"
          autosize
          type="textarea"
          placeholder="请描述你的问题"
          class="textarea"
          maxlength="100"
          show-word-limit
        />
      </div>
      <van-uploader
        :after-read="afterRead"
        class="uploading"
      />
      <div class="hint">最多6张，单个图片不超过20M</div>
      <div class="relation">联系方式</div>
      <van-field
        v-model="value"
        placeholder="请输入手机号便于联系（非必需）"
        class="phone"
      />
      <van-button
        type="primary"
        size="large"
        class="btn"
        color="linear-gradient(to left, #ff6034, #ee0a24)"
      >
        提交反馈
      </van-button>
    </main>
  </div>
</template>

<script>
export default {
  name: 'UserFeedback',
  data() {
    return {
      commentContent: '',
      value: '',
    };
  },
  methods: {
    afterRead() {}
  },
}
</script>

<style lang="less" scoped>
@import url('../../assets/style/common.less');

main {
  padding: 16px;

  .textarea-wrapper {
    flex: 1;
    padding: 16px 0;

    .textarea {
      background: #f5f5f5;
      border-radius: 4px;
    }
  }

  .hint {
    font-size: 14px;
    color: #ccc;
  }
  .relation {
    margin: 16px 0;
  }
  .phone {
    background: #f5f5f5;
    border-radius: 4px;
  }
  .btn {
    border-radius: 4px;
    margin-top: 300px;
  }
}

</style>
